<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份：
	<select id="province" onchange="selectCity(this)">
		<option>--请选择--</option>
		<option value="001">山东省</option>
		<option value="002">江苏省</option>
		<option value="003">浙江省</option>
	</select>
	城市：
	<select id="city" onchange="selectArea(this)">
		<option>--请选择--</option>
		<option value="001">青岛</option>
		<option value="002">烟台</option>
		<option value="003">济南</option>
	</select>
	区县：
	<select id="area" >
		<option>--请选择--</option>
		<option value="001">市北区</option>
		<option value="002">市南区</option>
		<option value="003">崂山区</option>
	</select>

	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$.post(
				"${pageContext.request.contextPath}/selectArea?method=selectProvince",
				function(data) {
					console.log(data);
					var html = "<option>--请选择--</option>";
					/* <option value="001">山东省</option> */
					for(var i = 0; i < data.length; i++) {
						// html += "<option value='001'>山东省</option>";
						html += "<option value='" + data[i].id + "'>" + data[i].province + "</option>";
					}
					
					$("#province").html(html); // innerHtml
				},
				"json"
			);
		});
		
		// this代表选中的<option value="001">市北区</option>标签对象
		function selectCity(obj) {
			// 清空区县下面原来的内容
			$("#area option:gt(0)").remove();
			
			// var provinceId = obj.value;
			var provinceId = $(obj).val();
			$.post(
				"${pageContext.request.contextPath}/selectArea?method=selectCity",
				{"provinceId" : provinceId},
				function(data) {
					console.log(data);
					var html = "<option>--请选择--</option>";
					for(var i = 0; i < data.length; i++) {
						html += "<option value='" + data[i].id + "'>" + data[i].city + "</option>";
					}
					
					$("#city").html(html); // innerHtml
				},
				"json"
			);
		}
		
		function selectArea(obj) {
			// var provinceId = obj.value;
			var cityId = $(obj).val();
			$.post(
				"${pageContext.request.contextPath}/selectArea?method=selectArea",
				{"cityId" : cityId},
				function(data) {
					console.log(data);
					var html = "<option>--请选择--</option>";
					for(var i = 0; i < data.length; i++) {
						html += "<option value='" + data[i].id + "'>" + data[i].area + "</option>";
					}
					
					$("#area").html(html); // innerHtml
				},
				"json"
			);
		}
	</script>
	
	
	
	
	
	
</body>
</html>